<template>
    <div class="thumb-preview" :loading="loading" :type="type" :name="name">
        <figure>
            <img v-for="img in imageList" :key="img.url" :src="img.url" :style="img.style" :type="img.key" @load="onStatechange(img,$event)" @error="onStatechange(img,$event)">
            <span v-if="name == 'empty' "></span>
            <span v-if="name == 'shape' " :style="(imageList[0] || {}).mapper"></span>
        </figure>
    </div>
</template>
<script>
export default {
    name: "ThumbPreview",
    props: {
        type: { type: String, default: () => 'pack' },
        pieces: { type: Array, default: () => [] },
        models: { type: Array, default: () => [] }
    },
    data () {
        return {
            imageList: [],
            name: '',
            loading: false,
        };
    },
    computed: {
        // activeModel(){
        //     const piece = this.pieces.find(i => i.output_img);
        // 	return this.models.find(m => m.surface_name == piece.surface_name)
        // },
    },
    watch: {
        pieces () {
            this.getImageList()
        },
        models () {
            this.getImageList()
        },
    },
    methods: {

        getImageList () {

            // 没有设计，且没有模板时，显示空白线框图正面
            // 有设计，没有模板时，显示线框图有设计的面
            // 没有设计，有模板时，显示模板正面
            // 有一面设计，有模板时，显示有设计的面+对应面的模板
            // 有两面设计，有模板时，显示有正面设计+对正面模板

            let name = '';
            const result = [];
            const design = this.pieces.filter(i => i.output_img);

            if (design.length > 0) {
                const piece = design[0];
                const model = this.models.find(m => m.surface_name == piece.surface_name);

                if (model) {
                    const piecesObject = Object.fromEntries(this.pieces.map((i) => [i.surface_name, i]));

                    result.push({
                        key: 'background',
                        url: 'https://img.podpartner.com/static/images-20230202/brand/package-model-select.png',
                        style: null,
                    });

                    // 背景图
                    result.push({
                        key: 'model',
                        url: this.$getImageUrl(model.mask_image),
                        style: null,
                    });

                    model.mapping.map(mapper => {
                        const piece = piecesObject[mapper.canvas_name]
                        piece && piece.output_img && result.push({
                            url: this.$getLitimgUrl(piece.output_img),
                            key: 'mapper',
                            style: {
                                left: 100 * (mapper.x / model.outer_width) + '%',
                                top: 100 * (mapper.y / model.outer_height) + '%',
                                width: 100 * (mapper.width / model.outer_width) + '%',
                                height: 100 * (mapper.height / model.outer_height) + '%',
                            }
                        });

                    });

                    name = 'model'
                } else {
                    // result.push({
                    //     url: 'https://img.podpartner.com/static/images-20230202/brand/package-model-select.png',
                    //     style: null,
                    // });

                    //  // 背景色
                    //  result.push({
                    //     url: '',
                    // 	name:'color',
                    //     style:{
                    // 		left: '17%',
                    //         top: '4%',
                    //         width: '66%',
                    //         height: '92.7%',
                    // 		backgroundColor: '#fff',
                    // 		borderRadius: '8px',
                    // 		opacity: 1,
                    // 	}
                    // });

                    // 背景图
                    // result.push({
                    //     url: this.$getImageUrl(piece.mask_image),
                    //     style: null,
                    // });

                    name = 'design';

                    // 生成的图
                    result.push({
                        url: this.$getLitimgUrl(piece.output_img),
                        key: 'mapper',
                        style: {
                            left: 100 * (piece.canvas_left / piece.outer_width) + '%',
                            top: 100 * (piece.canvas_top / piece.outer_height) + '%',
                            width: 100 * (piece.canvas_width / piece.outer_width) + '%',
                            height: 100 * (piece.canvas_height / piece.outer_height) + '%',
                        }
                    });
                }

            } else if (this.models.length > 0) {
                const model = this.models[0];
                const mapper = model.mapping[0] || {}
                // 背景图
                result.push({
                    url: this.$getImageUrl(model.mask_image),
                    key: 'model',
                    mapper: {
                        left: 100 * (mapper.x / model.outer_width) + '%',
                        top: 100 * (mapper.y / model.outer_height) + '%',
                        width: 100 * (mapper.width / model.outer_width) + '%',
                        height: 100 * (mapper.height / model.outer_height) + '%',
                    }
                });
                name = 'shape'

            } else if (this.pieces.length > 0) {
                const piece = this.pieces[0];
                // 背景图
                result.push({
                    key: 'mapper',
                    url: this.$getImageUrl(piece.mask_image),
                    style: null,
                });

                name = '';
            } else {
                name = 'empty';
            }

            this.name = name
            this.imageList = result;
            this.loading = true;
            this.$nextTick(() => this.onStatechange())
        },
        onStatechange (img, event) {
            if (this.$el) {
                const elems = this.$el.querySelectorAll('img');
                const images = Array.prototype.slice.call(elems);
                const unload = images.filter(img => !img.complete);
                this.loading = unload.length > 0;
            } else {
                this.loading = false;
            }
        }
    },
    created () {
        this.getImageList();
    }
};
</script>
<style lang="scss" scoped>
.thumb-preview {
    width: 160px;
    position: relative;
    border-radius: 6px;
    background: #f0f0f0;
    box-sizing: border-box;

    &::before {
        content: '';
        display: block;
        padding-bottom: 100%;
    }

    figure {
        position: absolute;
        top: 0;
        left: 0%;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    img[name='color'] {
        text-indent: -999em;
    }

    &[loading] figure {
        background-image: url(@/assets/images/loading.gif);
        background-position: center;
        background-size: 32px 32px;
        background-repeat: no-repeat;
        img {
            opacity: 0;
        }
    }

    &[type='pack'] {
        &[name='design'],
        &[name='empty'] {
            & > figure::before {
                content: '';
                position: absolute;
                left: 20%;
                top: 5%;
                width: 60%;
                height: 90%;
                background-color: #fafafa;
                border-radius: 8px;
                opacity: 1;
            }
            img {
                border: 1px dashed #bdbdbd;
            }
        }

        &[name='empty'] > figure span {
            position: absolute;
            left: 23.4375%;
            top: 23.4375%;
            width: 53.125%;
            height: 53.125%;
            border: 1px dashed #bdbdbd;
            box-sizing: border-box;

            &::before {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 2px;
                height: 16px;
                background: #bdbdbd;
                border-radius: 3px;
            }
            &::after {
                content: '';
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 16px;
                height: 2px;
                background: #bdbdbd;
                border-radius: 3px;
            }
        }
    }

    &[type='tag'] {
        &[name='design'],
        &[name='empty'] {
            & > figure::before {
                content: '';
                position: absolute;
                width: 58%;
                height: 94%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                background-color: #fafafa;
                border-radius: 8px;
                opacity: 1;
            }
            img {
                border: 1px dashed #bdbdbd;
                top: 50% !important;
                left: 50% !important;
                width: 46.25% !important;
                height: auto !important;
                transform: translate(-50%, -50%);
            }
        }

        &[name='shape'],
        &[name='empty'] {
            span {
                position: absolute;
                border: 1px dashed #bdbdbd;
                box-sizing: border-box;

                &::before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 2px;
                    height: 16px;
                    background: #bdbdbd;
                    border-radius: 3px;
                }
                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 16px;
                    height: 2px;
                    background: #bdbdbd;
                    border-radius: 3px;
                }
            }
        }

        &[name='empty'] span {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 46.25%;
            height: 84%;
        }

        &[name='shape'] span {
            span {
                position: absolute;
            }
        }
    }
}
</style>
